<template>
	<div class="CAttributeTagList list">
		<div class="list-header">
			<div class="th" v-bind:style="{'width' : item.width + 'px'}" v-for="(item, index) in columns">
				<span v-if="item.type=='index'">#</span>
				<span v-text="item.title"></span>
			</div>
			<div class="th" style="width: 80px;">
				<span>操作</span>
			</div>
		</div>

		<draggable v-model="mData" @update="dataDragEnd2Group" :options="{animation: 300, disabled: true}">
			<transition-group name="list-complete" class="etags-panel">
				<div class="group" v-for="(group, gindex) in mData" :key="gindex" >
					<div class="gname">
						<span v-text="group.name"></span>
						<div class="btns" v-if="group.type == 1">
							<Button-group v-if="false">
								<Button type="primary" icon="arrow-up-c" size="small" @click="changeSort(gindex, gindex - 1)"></Button>
								<Button type="primary" icon="arrow-down-c" size="small" @click="changeSort(gindex, gindex + 1)"></Button>
						    </Button-group>
							<Button 
								type="primary" 
								size="small" 
								style="width: 60px;"
								@click="add(group, gindex)">
								新增
							</Button>
						</div>
					</div>
					<draggable v-model="group.atags" @update="dataDragEnd2Item" :options="{animation: 300, disabled: !sortable}">
						<transition-group name="list-complete" class="etags-panel">
							<div class="row" v-bind:class="{'odd': rindex % 2 == 0, 
								'even' : rindex % 2 == 1, 
								'row-sel': rindex == cindex.rindex && gindex == cindex.gindex}" v-for="(row, rindex) in group.atags" :key="rindex" @click="onItemClick(row, gindex, rindex)">
								<div class="td" v-bind:style="{'width' : col.width + 'px'}" v-for="(col, cindex) in columns" v-html="col.type=='index' ? rindex + 1 : col.render != null ? col.render(group.atags[rindex]): group.atags[rindex][col.key]">
								</div>
								<div class="td" style="width: 80px;">
									<span @click="edit(row, gindex, rindex)">编辑</span>
								</div>
							</div>
						</transition-group>
					</draggable>
				</div>
			</transition-group>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	const $columns = [{
			type: 'index',
			width: 30,
			fixed: 'left',
			align: 'center'
		},
		{
			title: '名称',
			key: 'name',
			width: 80,
			fixed: 'left',
			align: 'center'
		},
		{
			title: '背景颜色',
			key: 'bgColor',
			width: 70,
			fixed: 'left',
			align: 'center'
		},
		{
			title: '字体颜色',
			key: 'textColor',
			width: 70,
			fixed: 'left',
			align: 'center'
		},
		{
			title: '实例',
			key: 'textColor',
			width: 90,
			fixed: 'left',
			align: 'center',
			render: function(row) {
				return "<span class='label-item' style=\"color: " + row.textColor + ";background-color: " + row.bgColor + ";border: 1px solid " + row.strokeColor + "\">" + row.name + "</span>";
			}
		}
	];
	var $this = null;
	export default {
		name: 'CAttributeTagList',
		data() {
			return {
				mData: [],
				columns: $columns,
				cindex: {
					gindex: 0,
					rindex: 0
				},
				showSize: 0
			}
		},
		mounted() {
			$this = this;
		},
		methods: {
			dataDragEnd2Item(evt) {
				this.$emit('on-drag-end', this.mData);
			},
			dataDragEnd2Group(evt) {
				this.$emit('on-change', this.mData);
			},
			add(group, gindex) {
				this.$emit('on-add', group, gindex);
			},
			edit(data, gindex, rindex) {
				this.$emit('on-edit', data, gindex, rindex);
			},
			onItemClick(data, gindex, rindex) {
				this.cindex = {
					gindex: gindex,
					rindex: rindex
				};
				this.$emit('on-item', data, gindex, rindex);
			},
			changeSort(oindex, index) {
				console.log(index + "-" + $this.showSize);
				if(index >= 0 && index < $this.showSize) {
					var temp = $this.mData[oindex];
					if(index - oindex < 0) {
						$this.mData.splice(index, 0, temp);
						$this.mData.splice(oindex + 1, 1);
					} else {
						$this.mData.splice(index + 1, 0, temp);
						$this.mData.splice(oindex, 1);
					}
				}
			}
		},
		components: {
			draggable
		},
		watch: {
			'data' (val) {
				this.mData = val;
				$this.showSize = 0;
				this.mData.forEach(function(item, index, array) {
					item.gindex = index + 1;
					if(item.atags.length > 0) {
						$this.showSize ++;
					}
				});
			},
			'index' (val) {
				this.cindex = val;
			}
		},
		props: ['data', 'index', 'sortable']
	}
</script>

<style>
	.label-item {
		padding: 2px 6px;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}
</style>
<style scoped="scoped">
	.group {

	}
	
	.group .gname {
		background: #E8E8E8;
		padding: 10px;
		color: #000000;
		opacity: 0.87;
		font-size: 13px;
	}
	
	.group .btns {
		float: right;
	}
	
	.list {
		display: inline-block;
		display: -webkit-inline-block;
	}
	
	.list-header {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		opacity: 0.87;
		font-size: 13px;
		width: ;
	}
	
	.list .row {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		font-size: 12px;
		cursor: pointer;
	}
	
	.list .row-sel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		font-size: 12px;
		cursor: pointer;
		color: #FFF !important;
		background-color: #2DB7F5 !important;
	}
	
	.list-header .th {
		height: 40px;
		white-space: nowrap;
		overflow: hidden;
		line-height: 40px;
		text-align: center;
		width: 200px;
		background-color: #f5f7f9;
		border-right: 1px solid #e3e8ee;
	}
	
	.list-header .th:last-child {
		border-right: none;
	}
	
	.list .row .td {
		height: 40px;
		white-space: nowrap;
		overflow: hidden;
		line-height: 40px;
		text-align: center;
		width: 200px;
		border-right: 1px solid #e3e8ee;
	}
	
	.list .row .td:last-child {
		border-right: none;
	}
	
	.list .odd {
		background: #FFF;
	}
	
	.list .even {
		background: #FFF;
	}
</style>